<template>
    <el-container class="vw-100 vh-100 min-vw-100 min-vh-100">
        <!-- 侧边栏-->
        <el-aside :width="isCollapse ? '64px' : '230px'" style="height: 100%">
            <div :style="{display: menuHeaderShow}">
                <span style="color: white; font-size: 16px" class="d-block mb-3"><strong>后台管理系统</strong></span>
                <div class="border-bottom border-secondary rounded-border shadow-lg" style="display:flex; justify-content: space-evenly">
                    <div class="font-13 d-inline-block" v-text="loginUser.loginName"></div>
                    <div class="font-13 d-inline-block" v-text="loginUser.role"></div>
                    <div class="font-13 d-inline-block logout" title="退出" @click="logout">
                        <i class="el-icon-switch-button"></i>
                    </div>
                </div>
            </div>
            <!-- 侧边栏菜单区域-->
            <el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff" unique-opened :collapse="isCollapse" :default-openeds="[uncollapseNo]">
                <!-- 一级菜单-->
                <el-submenu :index="'m-' + item.id" v-for="item in loginUserMenu" :key="item.id" class="text-left">
                    <!-- 一级菜单模板区域-->
                    <template slot="title">
                        <!-- 图标-->
                        <i :class="item.style"></i>
                        <!-- 文本-->
                        <span>{{item.resourceName}}</span>
                    </template>

                    <!-- 二级菜单-->
                    <el-menu-item :index="'/' + subItem.link" v-for="subItem in item.subMenuList" : key="subItem.id" @click="addTab(subItem)">
                        <template slot="title">
                        <!-- 图标-->
                        <i class="el-icon-menu"></i>
                        <!-- 文本-->
                        <span>{{subItem.resourceName}}</span>
                        </template>
                    </el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <!-- 右侧内容主体-->
        <el-container>
            <el-header class="border rounded-bottom shadow-lg">
                <el-button type="info" size="small" plain icon="el-icon-s-fold"  @click="collapseMenu"></el-button>
                <e-select v-model="lang" placeholder="请选择" size="small" style="width: 120px;">
                    <el-option
                    v-for="item in langOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    >
                    </el-option>
                </e-select>
            </el-header>
            <el-main>
                <el-tabs v-model="activeTab" type="card" @tab-remove="removeTab" class="bg-white sl-vh-100 sl-min-vh-100">
                    <el-tab-pane
                    v-for="item in editableTabs"
                    :key="item.name"
                    :label="item.title"
                    :name="item.name"
                    :closable="item.closable"
                    >
                        <keep-alive>
                            <component :is="item.content"></component>
                        </keep-alive>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    data () {
        return {
            indexUrl: null,
            loginUserMenu: null,
            lang: null,
            loginUser: null,
            isCollapse: false,
            menuHeaderShow: 'block',
            activePath: '',
            uncollapseNo: '',
            langOptions: [
                { label: '简体中文', value: 'zn_CN'},
                { label: '英文', value: 'en_US'}
            ],
            activeTab: 'Welcome',
            editableTabs: [
                { title: '首页', name: 'shouye', closable: false, content: () => import('@/views/Welcome.vue')}
            ]
        },
        methods: {
            logout: () => {
            },
            collapseMenu () {
                this.isCollapse = !this.isCollapse
                this.menuHeaderShow = this.isCollapse ? 'none' : 'block'
            },
            addTab (menu) {
                let newTabName = menu.link.replace(/\//g, '_')
                this.editableTabs.push({
                    title: menu.resourceName,
                    name: newTabName,
                    content: () => import('@/views/' + menu.link + '.vue'),
                    closable: true
                })
                this.activeTab = newTabName
            },
            removeTab (targetName) {
                let tabs = this.editableTabs
                let activeName = this.activeTab
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1]
                            if (nextTab) {
                                activeName = nextTab.name
                            }
                        }
                    })
                }
                this.activeTab = activeName
                this.editableTabs = tabs.filter(tab => tab.name !=== targetName)
            }
        },
        created () {
            this.loginUserMenu = JSON.parse(localStorage.getItem('loginUserMenu'))
            this.lang = localStorage.getItem('currentLocale')
            this.loginUser = JSON.parse(localStorage.getItem('loginUser'))
            this.activePath = sessioinStorage.getItem('activePath')
            this.uncollapseNo = sessionStorage.getItem('uncollapseNo')
        }
    }
}
</script>

<style lang="less" scoped>
.el-header {
    background-color: #eaedf1;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: #fff;
    font-size: 13px;
    > div {
        dispaly: flex;
        align-items: center;
        span {
            margin-left: 15px;
        }
    }
}

.el-aside {
    background-color: #333744;
    .el-menu {
        border-right: none;
    }
}

.el-main {
    background-color: #eaedf1;
    padding: 0px 0px 0px 0px;
}

.iconfont {
    margin-right: 10px;
}

.toggle-button {
    background-color: #4a5064;
    font-size: 10px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
}

.el-aside::-webkit-scrollbar {
    width: 5px;
}
.el-aside::-webkit-scrollbar-track {
    background: #eee;
}
.el-aside::-webkit-scrollbar-thumb {
    border-radius: 1em;
    background-color: #e0ebeb;
    background-image: linear-gradient(to top, #e0ebeb 0%, #3a7bd5 100%);
}
.font13 {
    color: #a7b1c2;
    font-size: 13px;
}
.nave-second-level span {
    padding: 7px 15px 7px 10px;
    padding-left: 52px;
    font-weight: 500;
}
.logout:hover, .logout:active {
    cursor: pointer;
}
</style>

<style type="css">
.sl-vh-100, sl-min-vh-100{
    height: 100%;
}
</style>
